<template>
  <div class="css3d" ref="css3dRef" @touchstart="move" @touchmove="move">
    <p>foo</p>
    <p :class="{transformed :isBoxTouch }">bar</p>
    <p>foo</p>
  </div>
</template>

<script lang="ts">
import { Vue, Options } from 'vue-property-decorator';
interface Pos{
  x: number,
  y: number
}
@Options({ components: {} })
export default class Css3D extends Vue {
  public rect: DOMRect|null = null;
  public isBoxTouch=false;
  public current: Pos ={ x: 0, y: 0 };

  public move(e: TouchEvent) {
    console.log(e);
    this.isBoxTouch = true;
  }
  public mounted() {
    this.rect =  (this.$el as HTMLElement).getBoundingClientRect();
    console.log(this.rect);
  }
}
</script>

<style lang="postcss" scoped>
.css3d{
  touch-action: none;
  p {
  width: 50px;
  height: 50px;
  background-color: teal;
  transition:1s;
  }

  .transformed {
    transform: perspective(500px) translate3d(100px,50px,10px);
    background-color: grey;
  }
}
</style>
